<template>
	<view>
		<tt-bar :title="isEdit?'修改记录':'发表记录'" leftIcon="icon-back"></tt-bar>
		<view class="mainBox">
		<view class="postCnt">
			<textarea class="mome" placeholder="定格美好时光，说点什么吧" maxlength="100" v-model="memo"></textarea>
			<view class="uploadImg">
				<view class="imgBox" v-for="(item, index) in selectImgList" :key="index" v-if="isShow && selectImgList.length > 0">
					<text class="iconfont icon-guanbi2fill" @tap.stop="delImg(index)"></text>
					<image :src="item" @tap="replaceImg(index)"></image>
				</view>
				<view class="upBtn" @tap="selectImg" v-if="selectImgList.length < 9">
					<text class="iconfont icon-xiangji"></text>
					<text class="btnText">上传图片</text>
				</view>
			</view>
		</view>
		<view class="delRow">
			<text class="iconfont icon-lajitong" @tap="delLog"></text>
			<text @tap="delLog">删除记录</text>
		</view>
		<view class="selectRow" @tap="showPicker">
			<text>{{selectList[selectMemberIndex].label}}</text>
			<text class="iconfont icon-right"></text>
		</view>
		</view>
		<view class="btmOp">
			<button @tap="postData">保存</button>
		</view>
		<w-picker mode="selector" @confirm="onConfirm" ref="selector" themeColor="#f00" :selectList="selectList"></w-picker>
		<hkModal ref="hkModal"></hkModal>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
	import wPicker from '../../components/w-picker/w-picker.js';
	import API from "@/common/api.js";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				id:0,
				isEdit:false,
				selectMemberIndex:0,
				selectList: [{
					label:'学员',
					value:0
				}],
				memo:'',
				selectImgList: [],
				uploadImg: [],
				isShow: false,
			};
		},
		methods:{
			// 选择图片
			selectImg() {
				let _this = this;
				let _count = 9 - _this.selectImgList.length;
				uni.chooseImage({
					count: _count,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						let _allCount = _this.selectImgList.length + res.tempFilePaths.length;
						if (_allCount > 9) {
							uni.showToast({
								title: '最多只能上传9张照片',
								icon: 'none'
							});
						} else {
							let _overSize = res.tempFiles.every(x => {
								return x.size <= 3145728;
							});
							if (_overSize) {
								uni.showLoading({
									mask: true,
									title: '图片上传中...'
								});
								if (_this.selectImgList.length > 0) {
									_this.selectImgList = _this.selectImgList.concat(res.tempFilePaths);
								} else {
									_this.selectImgList = res.tempFilePaths;
								}
								_this.isShow = true;
								let upArr = [];
								_this.selectImgList.forEach(function(x) {
									upArr.push({ uri: x, name: 'file' });
								});
								API.uploadImg(upArr)
									.then(upRes => {
										uni.hideLoading();
										_this.uploadImg = upRes;
										console.log(upRes);
									})
									.catch(err => {
										uni.showToast({
											title: '图片上传失败',
											icon: 'none'
										});
									});
							} else {
								uni.showToast({
									title: '图片不能超过3M',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			// 替换图片
			replaceImg(e) {
				let _this = this;
				let _index = parseInt(e);
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let _overSize = res.tempFiles.every(x => {
							return x.size <= 3145728;
						});
						if (_overSize) {
							uni.showLoading({
								mask: true,
								title: '图片上传中...'
							});
							_this.selectImgList[_index] = res.tempFilePaths[0];
			
							let upArr = [
								{
									uri: _this.selectImgList[_index],
									name: 'file'
								}
							];
							let upedImg=API.uploadImg(upArr)
								.then(upRes => {
									uni.hideLoading();
									_this.uploadImg[_index] = upRes[0];
									console.log(upRes);
									_this.isShow = false;
									_this.isShow = true;
								})
								.catch(err => {
									uni.showToast({
										title: '图片上传失败',
										icon: 'none'
									});
								});
						} else {
							uni.showToast({
								title: '图片不能超过3M',
								icon: 'none'
							});
						}
					}
				});
			},
			// 删除图片
			delImg(e) {
				let _index = parseInt(e);
				this.selectImgList.splice(_index, 1);
				this.uploadImg.splice(_index, 1);
			},
			getData(){
				if(this.isEdit){
					let _log=uni.getStorageSync('log');
					this.memo=_log.memo;
					if(_log.resList&&_log.resList.length){
						let _arr=[];
						_log.resList.forEach((x,i)=>{
							if(x.type==1){
								_arr.push(x.url)
							}
						})
						this.selectImgList=_arr;
						this.uploadImg=_arr;
						this.isShow=false;
						this.isShow=true;
					}
				}
			},
			getMemberListr(){
				this.$store
					.dispatch('apiGetMemberList', {
						userId: this.userInfo.userId,
						page_no: 1,
						page_size: 10
					}).then(res=>{
						console.log(res);
						let _arr=[];
						res.data.data.items.forEach((x, i) => {
							let _obj = {
								label: x.name,
								value: x.id.toString(),
								index:i
							};
							_arr[i] = _obj;
						});
						this.selectList=_arr;
						if(this.isEdit){
							let _log=uni.getStorageSync('log');
							let _index=this.selectList.findIndex((x,i)=>{
								return x.value==_log.memberId.toString()
							})
							this.selectMemberIndex=_index;
						}
						
					})
			},
			onConfirm(e){
				this.selectMemberIndex=e.checkArr.index;
			},
			showPicker(){
				this.$refs.selector.show();
			},
			postData(){
				let _this = this;
				_this.memo = this.memo.tailCut();
				if (!_this.memo && _this.selectImgList.length < 1) {
					uni.showToast({
						title: '内容或图片至少选择一项',
						icon: 'none'
					});
				} else {
					let _postData = {
						userId: this.userInfo.userId,
						memberId:this.selectList[this.selectMemberIndex].value,
						memo: this.memo
					};
					if(this.isEdit){
						_postData.id=this.id
					}
					if (_this.selectImgList.length) {
						let _arr = [];
						this.uploadImg.forEach(x => {
							_arr.push({
								type: 1,
								url: x
							});
						});
						_postData.resList = _arr;
					}
					this.$store.dispatch('apiPostMemberLog',_postData).then(res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
							uni.$emit('upList');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500);
						}
					});
				}
			},
			delLog(){
				let _this=this;
				this.$refs.hkModal.init({
					title:'删除记录',
					cntText:'确认删除这条记录吗？',
					cancle:'取消',
					confirm:'确认',
					maskClose:true,
					confirmFcn:()=>{
						_this.$store.dispatch('apiDelMemberLog',{
							id:_this.id
						}).then(res=>{
							if(res.data.code==1){
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								uni.$emit('upList');
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									});
								},1500)
							}
						})
					},
				})
				this.$refs.hkModal.show()
			}
		},
		onLoad(cfm) {
			this.isEdit=!!cfm.isedit;
			if(this.isEdit){
				this.id=cfm.id
			}
			this.getData();
			this.getMemberListr();
		}
	}
</script>

<style lang="less">
	
	page{
		background-color: #f6f6f6;
	}
	.mainBox{
		padding-bottom: 130upx;
	}
	.postCnt{
		background-color: #FFFFFF;
		border-top: 2upx solid #efefef;
		padding: 20upx 40upx;
		display: flex;
		flex-direction: column;
		.mome{
			font-size: 32upx;
			height: 450upx;
			width: 100%;
		}
	}
	.uploadImg {
		display: flex;
		flex-wrap: wrap;
		.imgBox {
			width: 180upx;
			height: 180upx;
			position: relative;
			margin-right: 20upx;
			margin-bottom: 20upx;
	
			image {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}
	
			.iconfont {
				position: absolute;
				top: -16upx;
				right: -16upx;
				font-size: 40upx;
				color: #ff3d3d;
				z-index: 3;
			}
		}
	
		.upBtn {
			width: 180upx;
			height: 180upx;
			box-sizing: border-box;
			border-radius: 10upx;
			border: 1rpx dashed #cccccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #b2b2b2;
			margin-bottom: 20upx;
	
			.iconfont {
				font-size: 60upx;
			}
	
			.btnText {
				font-size: 28upx;
			}
		}
	}
	.delRow{
		display: flex;
		align-items: center;
		height: 100upx;
		border-top: 2upx solid #efefef;
		background-color: #FFFFFF;
		padding: 0 40upx;
		justify-content: flex-end;
		text{
			font-size: 32upx;
			color: #989898;
		}
		.iconfont{
			margin-right: 10upx;
			font-size: 32upx;
		}
	}
	.selectRow{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-top: 10upx solid #f6f6f6;
		height: 120upx;
		padding: 0 40upx;
		text{
			font-size: 32upx;
			color: #202932;
		}
		.iconfont{
			font-size: 40upx;
			color: #c3c3c3;
		}
	}
	.btmOp{
		padding: 20upx 40upx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		button{
			height: 80upx;
			width: 100%;
			background-color: #ffc815;
			color: #FFFFFF;
			line-height: 80upx;
			font-size: 32upx;
			border-radius: 40upx;
		}
	}
</style>
